<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{layout/include :: common_header(~{::title},_,~{::style},~{::script})}">
    <title>200 Url Forward</title>
    <style>
        /* 将根元素占满浏览器 */
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        .iframe {
            margin: 0 auto;
            display: block;
            width: 100%;
            height: 100%;
            border: 0;
        }
        .hide {
            display: none;
        }
        .togo {
            width: 100%;
            height: 120px;
            text-align: center;
            padding-top: 90px;
        }
        a:link, a:visited, a:hover, a:active {
            text-decoration: none;
            color: black;
        }
    </style>
    <script type="text/javascript">
        function aiTip(message, source, lineno, colno, error) {
            // console.log('捕获异常：', message, source, lineno, colno, error);
            var iframeEle = document.getElementById("ifr");
            var togoEle = document.getElementById("togo");
            iframeEle.classList.add("hide");
            togoEle.classList.remove("hide");
            return true;
        }

        // 检测 iframe 加载异常
        window.onerror = aiTip;
    </script>
</head>
<body>
<iframe th:src="${url}" id="ifr" class="iframe" allowfullscreen="allowfullscreen" allow="microphone; camera"></iframe>

<div id="togo" class="togo hide">
    <a th:href="${url}" th:text="'前往 ' + ${url}"></a>
</div>
</body>
</html>